<template>
    <div class="box">
        <v-chart :option="option" autoresize class="charts"></v-chart>

    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => []
        },
        peopleN: {
            default: 0
        }
    },
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler() {
                this.option.series[0].data = this.data

            }
        },
        peopleN: {
            deep: true,
            immediate: true,
            handler() {
                this.peopleNum = this.peopleN

            }
        },

    },
    data() {
        return {
            peopleNum: "",
            option: {
                legend: {
                    orient: 'vertical',
                    left: 0,
                    top: "20%",
                    textStyle: {
                        lineHeight: 20
                    },
                    formatter: (name) => {
                        let data = this.data
                        let a
                        let b
                        data.forEach(item => {
                            if (name == item.name) {
                                a = item.per
                                b = item.my_per
                            }
                        })
                        return `${name}：占比：${a}%\n满意率${b}%`
                    }
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#fff",
                    textStyle: {
                        color: "#000",
                        fontSize: 13,
                    },
                    formatter: (params) => {

                        let a
                        console.log(params);
                        this.data.forEach(item => {
                            if (item.name == params.name) {
                                a = `<div style="display:flex">
                                        <div>${params.name}：</div>
                                        <div style="display:flex;flex-direction: column;justify-content: flex-end;">
                                            <div>占比${item.per}%</div>
                                            <div>满意率${item.my_per}%</div>
                                            <div>参与${item.value}人</div>
                                        </div>
                                    </div>`
                            }
                        })
                        return a
                    }
                },
                series: [
                    {
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                color: '#222222',
                                formatter: () => {
                                    return `参与${this.peopleNum}人`
                                }
                            }
                        },
                        color: ["#5A6EFA", "#00FFFF", "#006DEE", "#55C68D"],
                        name: 'Nightingale Chart',
                        width: "auto",
                        height: "auto",
                        type: 'pie',
                        radius: ["20%", "60%"],
                        center: ['65%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 7
                        },
                        data: []
                        // data: [
                        //     { value: 40, name: '1 - 4次' },
                        //     { value: 38, name: '5 - 10次 ' },
                        //     { value: 32, name: '11 -3 0次' },
                        //     { value: 30, name: '30次以上' },
                        // ]
                    }
                ]
            }
        }
    },
    mounted() {
        this.option.series[0].data = this.data
        this.peopleNum = this.peopleN
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
}
.charts {
    width: 100%;
    height: 100%;
}
</style>